<template>
  <el-card>
    <el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
      <el-form-item>
        <el-input v-model="state.queryForm.name" placeholder="专业名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-auth="'col:tea:save'" type="primary" @click="addOrUpdateHandle()">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="openUpload">导入</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%">
      <el-table-column prop="code" label="工号" header-align="center" align="center" width="200"></el-table-column>
      <el-table-column prop="name" label="姓名" header-align="center" align="center"></el-table-column>
      <fast-table-column dict-type="user_gender" label="性别" prop="sex"></fast-table-column>
      <el-table-column prop="academyName" label="学院" header-align="center" align="center"></el-table-column>
      <el-table-column prop="phone" label="手机号" header-align="center" align="center"></el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
        <template #default="scope">
          <el-button v-auth="'col:tea:update'" type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <el-button v-auth="'col:tea:delete'" type="primary" link @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :current-page="state.page"
        :page-sizes="state.pageSizes!"
        :page-size="state.limit"
        :total="state.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
    >
    </el-pagination>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>

    <el-dialog  v-model="dialogVisible" title="导入学生">
      <el-form>
        <el-form-item>
          <el-select
              v-model="dataForm.academyId"
          >
            <el-option v-for="item in classCascadeList" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-upload :action="uploadUserExcelUrl"
                     :headers="{
                        Authorization: userStore.token
                     }"
                     :data="dataForm"
                     ref="uploadRef"
                     :before-upload="beforeUpload"
                     :on-success="handleSuccess"
                     :on-progress="(evt, uploadFile, uploadFiles)=>{
                       console.log(evt, uploadFile, uploadFiles)
                     }"
                     :show-file-list="false"
                     :auto-upload="false">
            <el-button type="warning">选取文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-button @click="submit">提交</el-button>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'
import AddOrUpdate from './add-or-update.vue'
import { IHooksOptions } from '@/hooks/interface'
import FastTableColumn from "@/components/fast-table-column/src/fast-table-column.vue";
import constant from "@/utils/constant";
import {ElMessage, UploadProps} from "element-plus";
import {useClassCascadeSelectApi} from "@/api/college/class";
import {useUserStore} from "@/store/modules/user";
import {useDepSelectApi} from "@/api/college/dep";
const userStore = useUserStore()
const state: IHooksOptions = reactive({
  dataListUrl: '/sys/teacher/page',
  deleteUrl: '/sys/teacher',
  queryForm: {
    name: ""
  }
})
const uploadRef = ref()
const cascade = ref([])
const dataForm = reactive({
  academyId: "",
  specializedId: "",
  classId: ""
})
const classCascadeList = ref<{id: string, name: string}[]>([])
const dialogVisible = ref(false)
const uploadUserExcelUrl = ref(constant.apiUrl +
    `/sys/teacher/import`)


const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id)
}
const beforeUpload: UploadProps['beforeUpload'] = file => {
  if (file.size / 1024 / 1024 / 1024 / 1024 > 1) {
    ElMessage.error('文件大小不能超过100M')
    return false
  }
  return true
}
const handleSuccess: UploadProps['onSuccess'] = (res, file) => {
  if (res.code !== 0) {
    ElMessage.error('上传失败：' + res.msg)
    return false
  }
  ElMessage.success({
    message: '上传成功',
    duration: 500,
    onClose: () => {
      dialogVisible.value = false
      cascade.value = []
      getDataList()
    }
  })
}

function getDep(){
  useDepSelectApi().then(res=>{
    classCascadeList.value = res.data
  })
}
const openUpload = () => {
  getDep()
  dialogVisible.value = true
}

function submit(){
  console.log(uploadRef.value)
  uploadRef.value.submit();
}


const { getDataList, sizeChangeHandle, currentChangeHandle, deleteHandle } = useCrud(state)
</script>
